<template>
    <div class="w-[456px] h-full p-[16px] searchUnitPopup flex flex-col ">
        <div class="flex-bc mb-[16px]">
            <div class="text-[14px]">单位名称</div>
            <div class="flex-1 px-[8px]">
                <el-input placeholder="请输入单位名称" />
            </div>
            <div>
                <el-button type="primary">搜索</el-button>
            </div>
        </div>
        <div ref="scrollbarBoxRef" class="flex-1 relative">
            <el-scrollbar :height="`${scrollbarHeight}px`">
                <div class="mb-[4px]">
                    <!-- <div class="bg-[rgba(22,36,64,0.8)] mb-[4px]" v-for="(item, index) in 1" :key="index"> -->
                    <el-tree :data="treeList" :props="defaultProps" default-expand-all :default-expanded-keys="defaultExpandedKeys"
                        node-key="id" :key="treeKey" @node-click="checkedUnit">
                        <template #default="{ node, data }">
                            <div class="w-[26px] h-[26px] mr-[10px] flex-c rounded-[6px] bg-[#273D5B]">
                                <div class="w-[16px] h-[16px]  flex-c ">
                                    <!-- <div class="w-[26px] h-[26px] rounded-[6px] bg-[#273D5B] flex-c "> -->
                                    <img class="w-[16px] h-[16px] " src="@/assets/screenimg/unit.png" />
                                </div>
                            </div>
                            <span>{{ isNullOrEmpty(node.label) }}</span>
                        </template>
                    </el-tree>
                    <div class="w-full h-[1px]" style="background: var(--data-select-border);"></div>
                </div>
            </el-scrollbar>
        </div>
        <el-checkbox class="!h-[16px] mt-[16px]" v-model="showProjectType" label="数据包含下级单位"
            :true-value="UNIT_TYPE_VIEW_Map.include" :false-value="UNIT_TYPE_VIEW_Map.current" @change="viewsChange" />
    </div>
</template>
<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { UNIT_TYPE_VIEW_Map } from "@/constant/index";
import { usePageReloadStoreHook } from "@/store/modules/pageReload";
import { usePageVariablesStoreHook } from "@/store/modules/pageVariables";
import { cloneDeep } from "@pureadmin/utils";
import { getScreenUnitTree } from '@/api/screen/index'
const usePageVariablesStore = usePageVariablesStoreHook();
const scrollbarBoxRef = ref()
const scrollbarHeight = ref(0)
const showProjectType = ref(UNIT_TYPE_VIEW_Map.current);
const xScale = ref(1)
const yScale = ref(1)
const unitPathMap = ref({})
const treeKey = ref(0)
watch(() => scrollbarBoxRef.value?.height, () => {
    scrollbarHeight.value = scrollbarBoxRef.value?.getBoundingClientRect()?.height / yScale.value
}, {
    deep: true
})
const treeList = ref([])
const defaultExpandedKeys = ref([])
onMounted(() => {
    const el = document.querySelector('#app')
    let scaleValues = el.style?.transform.slice(6, -1).split(",").map(Number);
    if (scaleValues?.length < 2) {
        scaleValues = [scaleValues[0] ?? 1, scaleValues[0] ?? 1];
    }
    xScale.value = scaleValues[0]
    yScale.value = scaleValues[1];
    showProjectType.value = usePageVariablesStore.getScreen()?.views ?? UNIT_TYPE_VIEW_Map.current

    getScreenUnitTree().then(res => {
        treeList.value = res.result.data
        initPath()
        defaultExpandedKeys.value = unitPathMap.value[usePageVariablesStore.getScreen()?.unit?.id]
    })
})
const initPath = (list = treeList.value, path = []) => {
    list.forEach(item => {
        unitPathMap.value[item.id] = path
        let copyPath = cloneDeep(path)
        copyPath.push(item.id)
        if (item.childs && item.childs.length > 0) {
            initPath(item.childs, copyPath)
        }
    })
}
const checkedUnit = (data) => {
    let screenInfo = cloneDeep(usePageVariablesStore.getScreen())
    screenInfo.unit = data
    usePageVariablesStore.setScreen(screenInfo)
    usePageReloadStoreHook().reloadPages()
}
const viewsChange = () => {
    let info = cloneDeep(usePageVariablesStore.getScreen());
    info.views = showProjectType.value;
    usePageVariablesStore.setScreen(info);
    usePageReloadStoreHook().reloadPages()
};
const customNodeClass = (data, node) => {
    if (usePageVariablesStore.getScreen()?.unit?.id == data.id) {
        return 'is-checked'
    }
    return null
}

const defaultProps = {
    children: 'childs',
    label: 'unityName',
    value: 'id',
    class: customNodeClass
}
</script>
<style lang="scss" scoped>
.searchUnitPopup {
    ::v-deep(.el-input) {
        .el-input__wrapper {
            box-shadow: none;
            background-color: #001A28;
        }
    }

    ::v-deep(.el-tree) {
        .el-tree-node__content {
            height: 46px;
            background-color: rgba($color: #162440, $alpha: 0.8) !important;
        }

        .is-current>.el-tree-node__content {
            color: #fff !important;
        }

        .el-tree-node__content:hover {
            color: #fff;
        }

        .is-checked {
            .el-tree-node__content {
                background-color: #254380 !important;
                // background-color: var(--el-color-primary) !important;
                // background-color: rgba($color: #000000, $alpha: 0) !important;
            }

            .el-tree-node__children {
                .el-tree-node__content {
                    color: #fff !important;
                    background-color: rgba($color: #162440, $alpha: 0.8)  !important;
                }
            }
        }
    }
}
</style>"